<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>markdown-it 测试</title>
    <!-- 使用 CDN 引入 markdown-it -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.min.js"></script>

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
    <!-- and it's easy to individually load additional languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 1200px; margin: 20px auto; padding: 0 20px }
        .container { display: flex; gap: 30px }
        .column { flex: 1; min-width: 0 }
        pre { background: #f5f5f5; padding: 15px; border-radius: 5px }
        .rendered { border: 1px solid #ddd; padding: 15px }
        h2 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px }
        .hljs { padding: 1em; border-radius: 4px }
    </style>
</head>
<body>
    <h1>markdown-it 测试</h1>
    
    <div class="container">
      <div class="column">
        <h2>原始 Markdown</h2>
        <pre id="markdown-content">
# 标题测试

## 二级标题

**粗体文本** 和 *斜体文本*

[链接示例](https://example.com)

![图片描述](https://via.placeholder.com/150)

- 无序列表项 1
- 无序列表项 2
  - 嵌套列表项

1. 有序列表项 1
2. 有序列表项 2

`行内代码`

```javascript
// 代码块示例
function hello() {
  console.log('Hello markdown-it!');
}
```
<div style="color: red;">默认并不会保留原标签</div>

```python
def greet(name):
    print(f"Hello {name}")
```
        </pre>
      </div>
      <div class="column">
        <h2>渲染结果</h2>
        <div id="rendered-html" class="rendered"></div>
      </div>
    </div>

    <script>
      // 初始化 markdown-it 并配置选项
      const md = window.markdownit({
        html: true,        // 允许 HTML 标签
        breaks: true,      // 将换行转换为 <br>
        linkify: true,     // 自动转换 URL 为链接
        typographer: true,  // 排版优化
        // 渲染转换模板过程中，处理pre code代码块
        highlight: function (str, lang) {
            console.log(str, lang)
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`;
                } catch (__) {}
            }
            return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
        }
      });

      // 获取测试内容并渲染
      const markdownContent = document.getElementById('markdown-content').textContent;

      // 获取内容并清理多余的空格
      // const markdownContent = document.getElementById('markdown-content')
      //   .textContent
      //   .trim()  // 移除开头和结尾的空白
      //   .replace(/^\s+/gm, '');  // 移除每行开头的空白('m'代表多行匹配模式)
      console.log(markdownContent)

      let content = "根据您的体检历史（前列腺抗原比值偏低、肺部结节等）和防癌筛查需求，以下是针对性建议：<br><br>### 一、防癌体检套餐选择指南<br>**1. 基础防癌套餐（推荐）**<br>- **适用人群**：40岁以上/有家族史/既往异常指标<br>- **包含项目**：<br>  - **肿瘤标志物12项**（含前列腺特异性抗原、肺癌相关NSE、消化道CA72-4等）<br>  - **低剂量胸部CT**（筛查肺结节，您2023年发现的结节需年度复查）<br>  - **胃肠镜**（可加选，金标准的消化道肿瘤筛查）<br>  - **超声组合**（甲状腺+前列腺+肝胆胰脾）<br>  - **Septin9基因检测**（结直肠癌早期筛查）<br>- **费用**：约¥3000-4000<br><br>**2. 深度防癌套餐**<br>- **新增项目**：<br>  - **全身PET-CT**（针对全身肿瘤代谢筛查，适合高危人群）<br>  - **胃泌素释放肽前体**（小细胞肺癌标志物）<br>  - **循环肿瘤细胞检测**（血液中癌细胞筛查）<br>- **费用**：约¥8000-10000<br><br>### 二、针对您个人情况的重点建议<br>1. **肺部监测**  <br>   - 必选：**低剂量胸部CT**（您2023年结节需持续跟踪）<br>   - 加选：**肺癌七项抗体检测**（对肺结节良恶性判断有参考价值）<br><br>2. **前列腺专项**  <br>   - **游离PSA/总PSA比值**（您2022年比值0.21偏低，需重点关注）<br>   - **前列腺MRI**（若PSA持续异常可考虑）<br><br>3. **消化道筛查**  <br>   - **幽门螺杆菌分型检测**（您2022年C13阳性，2023年抗体阴性，建议复查）<br>   - **胃功能三项**（PGI/PGII比值可反映胃黏膜状态）<br><br>### 三、注意事项<br>1. **检测时机**  <br>   - 肿瘤标志物需空腹采血  <br>   - 胃肠镜需提前3天清淡饮食  <br><br>2. **套餐对比建议**  <br>   ```text<br>   | 项目               | 基础套餐 | 深度套餐 | 您的需求 |<br>   |--------------------|----------|----------|----------|<br>   | 胸部CT            | ✓        | ✓        | 必选     |<br>   | 胃肠镜            | 可选     | ✓        | 建议加选 |<br>   | 前列腺MRI         | ✗        | ✓        | 可选     |<br>   | 肿瘤标志物        | 12项     | 21项     | 12项+肺癌七项 |<br>   ```<br><br>3. **后续随访建议**  <br>   - 肺结节：每6-12个月复查CT  <br>   - PSA：每6个月复查（重点关注游离PSA比值变化）<br><br>建议选择**基础防癌套餐+胃肠镜组合**（约¥4500），既能覆盖主要风险点又避免过度检查。如需进一步优化方案，可告知您的预算和具体关注部位。"
      content = content.replace(/\<br\>/g, '\n')
      const renderedHTML = md.render(content);

      // const renderedHTML = md.render(markdownContent);
      console.log(renderedHTML)
      console.log(md)

      // 显示渲染结果
      document.getElementById('rendered-html').innerHTML = renderedHTML;

      // 全局高亮初始化（处理【动态生成】的内容，每次调用会去遍历文档流，找到没有转换过的pre code，然后自动转换）
      // hljs.highlightAll(); // 因为模板都在上面渲染md.render时渲染了，没有动态渲染需求，这个不需要
    </script>
  </body>
</html>
